﻿<!DOCTYPE html>
<html lang="en">
<nav th:replace="shop/include::shopHeader"></nav>

<body class="shopping_cart_page">
   <nav th:replace="shop/include::shopTop"></nav>
  
  <!-- Main Container -->
  <section class="main-container col1-layout">
    <div class="main container">
      <div class="col-main">
        <div class="cart">
          <div class="page-content page-order"><div class="page-title">
            <h2>购物车列表</h2>
          </div>
            <div class="order-detail-content">
              <div class="table-responsive">
                <table class="table table-bordered cart_summary">
                  <thead>
                    <tr>
                      <th class="cart_product">商品图片</th>
                      <th>商品名称/简介</th>
                      <th>单价</th>
                      <th>抵扣商品积分</th>
                      <th>抵扣后实付</th>
                      <th>数量</th>
                      <th>单件合计</th>
                      <th  class="action"><i class="fa fa-trash-o"></i></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="sc:${list}" th:id="'tr_id_' + ${sc.goodsId}">
                      <td class="cart_product">
                      	<a th:href="${ '/shop/detail/' +sc.goodsId}">
                      		<img th:src="${'/files/' + sc.thumbnailImage}" alt="Product">
                      	</a>
                      </td>
                      <td class="cart_description" style="max-width:200px;">
                      	<p class="product-name" th:text="${sc.title}"></p>
                         <small th:text="${sc.subject}"></small>
                      <td class="price"><span th:text="${'￥'+ #numbers.formatDecimal(sc.salePrice * 0.01, 1, 2) }"></span></td>
                      <td class="price">
                      	<span th:text="${'￥'+ #numbers.formatDecimal(sc.shopCredit * 0.01, 1, 2) }"></span>
                      </td>
                      <td class="price"><span th:text="${'￥'+ #numbers.formatDecimal(sc.realPay * 0.01, 1, 2)  }"></span></td>
                      <td class="qty" style="width:130px;">
                      	<div class="numbers-row">
	                      <div class="dec qtybutton-new" th:onclick="'javascript:updateCart(\''+${sc.goodsId}+'\',-1)'"><i class="fa fa-minus">&nbsp;</i></div>
	                      <input class="qty" th:id="'qty_'+${sc.goodsId}" maxlength="12" name="qty" title="Qty" type="text" th:value="${sc.goodsNum}" disabled="disabled">
	                      <div class="inc qtybutton-new" th:onclick="'javascript:updateCart(\''+${sc.goodsId}+'\',1)'"><i class="fa fa-plus">&nbsp;</i></div>
                    	    </div>
                      </td>
                      <td class="price"><span th:text="${'￥'+ #numbers.formatDecimal(sc.totalPrice * 0.01, 1, 2)  }"></span></td>
                      <td class="action"><a href="javascript:void(0);" th:onclick="'javascript:deleteCart(\''+${sc.goodsId}+'\')'"><i class="icon-close"></i></a></td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="3" rowspan="3" style="font-size:14px;">
                      <div th:if="${not #lists.isEmpty(userAddressList)}">
	                      收货地址：
	                      <select name="userAddressId" id="addressId">
	                      	<option th:each="address:${userAddressList}" th:value="${address.id}" th:text="${address.address +' '+ address.mobile +' '+ address.name}"></option>
	                      </select>
                      </div>
                      <div th:if="${#lists.isEmpty(userAddressList)}">
	                      您还没有收货地址。
                      </div>
                      <a href="/address"><strong>管理收货地址</strong></a>
                      </td>
                      <td colspan="3">商品总金额</td>
                      <td colspan="2"><strong id="goodsPriceTotal" th:text="${'￥'+ #numbers.formatDecimal(calculating.goodsPriceTotal * 0.01, 1, 2)  }"></strong> </td>
                    </tr>
                    <tr>
                      <td colspan="3">抵扣积分总金额</td>
                      <td colspan="2"><strong id="shopCreditTotal" th:text="${'￥'+ #numbers.formatDecimal(calculating.shopCreditTotal * 0.01, 1, 2)  }"></strong></td>
                    </tr>
                    <tr>
                      <td colspan="3"><strong>实付金额</strong></td>
                      <td colspan="2"><strong id="realPayTotal" th:text="${'￥'+ #numbers.formatDecimal(calculating.realPayTotal * 0.01, 1, 2)  }">$237.88 </strong></td>
                    </tr>
                    <tr>
                      <td colspan="3"><strong>选择支付方式</strong></td>
                      <td colspan="5" style="text-align:right;">
                      	<label><img src="/shop/images/alypay_icon.jpg"/><input type="radio" value="1" name="payType" checked="checked"/></label>&nbsp;
                      	<label><img src="/shop/images/wx_pay_icon.jpeg"/><input type="radio" value="2" name="payType"/></label>&nbsp;
                      	<label>现金积分支付<input type="radio" value="3" name="payType"/></label>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="cart_navigation"> 
              	<a class="continue-btn" href="/shop/home"><i class="fa fa-arrow-left"> </i>&nbsp; 返回继续购物</a> 
              	<a th:if="${not #lists.isEmpty(list)}" class="checkout-btn" href="javascript:void(0);" onclick="submitOrder();"><i class="fa fa-check"></i>提交订单去支付</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
   <!-- Footer -->
  <nav th:replace="shop/include::shopFooter"></nav>
<!-- End Footer --> 
<!-- JS --> 
<!-- jquery js --> 
<script type="text/javascript" src="/shop/js/jquery.min.js"></script> 
<!-- bootstrap js --> 
<script type="text/javascript" src="/shop/js/bootstrap.min.js"></script> 
<!-- owl.carousel.min js --> 
<script type="text/javascript" src="/shop/js/owl.carousel.min.js"></script> 
<!-- bxslider js --> 
<script type="text/javascript" src="/shop/js/jquery.bxslider.js"></script> 
<!-- megamenu js --> 
<script type="text/javascript" src="/shop/js/megamenu.js"></script> 
<script type="text/javascript">
  /* <![CDATA[ */   
  var mega_menu = '0';
  /* ]]> */
</script> 
<!-- jquery.mobile-menu js --> 
<script type="text/javascript" src="/shop/js/mobile-menu.js"></script>
<!--jquery-ui.min js --> 
<script type="text/javascript" src="/shop/js/jquery-ui.js"></script> 
<!-- main js --> 
<script type="text/javascript" src="/shop/js/main.js"></script> 
<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
<script type="text/javascript">
function updateCart(goodsId,num){
	$.ajax({
		type : "POST",
		url : "/shop/shopping_cart/add",
		data : JSON.stringify({"goodsId":goodsId,"goodsNum":num}),// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
				$("#qty_"+goodsId).val(r.domain.goodsNum);
				calculating();
				loadShoppingCartNum();
			} else {
				layer.msg(r.msg);
			}
		}
	});
}

function deleteCart(goodsId,num){
	$.ajax({
		type : "POST",
		url : "/shop/shopping_cart/delete",
		data : JSON.stringify({"goodsId":goodsId}),// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				layer.msg("删除成功");
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
				$("#qty_"+goodsId).val(r.msg);
				calculating();
				$(".cart_summary tbody > #tr_id_"+goodsId).remove();
			} else {
				layer.msg(r.msg);
			}
		}
	});
}

function loadShoppingCartNum(){
	$.ajax({
		type : "GET",
		url : "/shop/shopping_cart/total_number",
		sync:false,
		data : {},// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
loadShoppingCartNum();
/**
 * 重新计算价格
 */
function calculating(){
	$.ajax({
		type : "GET",
		url : "/shop/calculating",
		data : {},// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				var goodsPriceTotal = r.calculating.goodsPriceTotal * 0.01;
				$("#goodsPriceTotal").html("￥"+goodsPriceTotal.toFixed(2));
				var shopCreditTotal = r.calculating.shopCreditTotal * 0.01;
				$("#shopCreditTotal").html("￥"+shopCreditTotal.toFixed(2));
				var realPayTotal = r.calculating.realPayTotal * 0.01;
				$("#realPayTotal").html("￥"+realPayTotal.toFixed(2));
			} else {
				layer.msg(r.msg);
			}
		}
	});
}

function submitOrder(){
	var addressId = $("#addressId").val();
	var payType = $("input[name=payType]:checked").val();
	$.ajax({
		type : "POST",
		url : "/shop/order/create",
		data : JSON.stringify({"userAddressId":addressId,"payType":payType}),// 你的formid
		contentType:"application/json",
        dataType : "json",
        async : false,
		success : function(r) {
			if (r.code == 0) {
				if(payType == 1){
					alipayPay(r.orderInfo.id)
				}else if(payType == 2){
					wxPay(r.orderInfo.id);
				}else if(payType == 3){
					jifenPay(r.orderInfo.id);
				}
			} else {
				layer.msg(r.msg);
			}
		}
	});
}

function alipayPay(orderId){
	window.location.href="/shop/order/pay/alipay?id="+orderId;
}

function wxPay(orderId){
	window.location.href="/shop/order/pay/wx?id="+orderId;
}
function jifenPay(orderId){
	window.location.href="/shop/order/pay/jifen?id="+orderId;
}


</script>
 
</body>
</html>
